import React from "react";
import {Button, Upload, Table, Modal, Form, Icon, notification, InputNumber, message, Input} from "antd";
import ViewTitle from "../ViewTitle";
import notify from "../NotificationExtra";
import {connect} from "dva";
import ComponentBase from "../Base/ComponentBase";
import {FormField, FormLayout, ModalFooter} from "antd-extra";
import TextArea from "antd/es/input/TextArea";
import {getCode} from "../../services/global";

@Form.create()
@connect(({global, user, dict}) => ({...global, ...user, ...dict}))
export default class ModalUploadFile extends ComponentBase {
  constructor(props) {
    super(props);
    this.state = {};
    const {record} = this.props;
    if (record) {
      const {fileList, memo} = record;
      this.state.fileList = fileList;
      this.state.memo = memo;
    }
  }

  renderFoot = () => {
    const {foot, value, modalRef, callback, form} = this.props;
    if (foot) {
      return foot(value, modalRef);
    } else {
      return (
        <ModalFooter>
          <Button type="primary" onClick={() => {
            form.validateFields((err, values) => {
              if (err) {
                notify({type: 'error', message: '有必填项未填写！'});
                const {code} = err;
                const {errors} = code;
                errors.forEach(item => {
                  notification.error(item);
                });
                return;
              }
              _.merge(values, this.state);
              callback(values);
              modalRef.close();
            });
          }}>确定</Button>
          <Button onClick={() => {
            modalRef.close();
          }}>取消</Button>
        </ModalFooter>
      );
    }
  };

  render() {
    const {fileList = [], memo} = this.state;
    const {form} = this.props;
    const {tenant} = this.getLoginInfo();
    const {tenantCode} = tenant;
    const code = getCode('FIL');
    const filename = fileList.length ? fileList[0].name : "";
    this.state.filename = filename;
    return (
      <Form>
        {
            <FormLayout form={form} cols={1}>
              <FormField
                label={"文件"}
                name={'file'}
              >
                <Upload
                  name={'file'}
                  action={`http://127.0.0.1:18008/api/global/upload?orderCode=${code}&table=SalesOrder&tenantCode=${tenantCode}&fileList=${[...fileList]}`}
                  headers={{authorization: 'authorization-text'}}
                  listType={"picture-card"}
                  accept={".pdf,.doc,.docx,.xls,.xlsx"}
                  fileList={fileList}
                  showUploadList={true}
                  // previewFile={file=>{
                  //   console.log(file);
                  // }}
                  onDownload={info => {

                  }}
                  onPreview={file => window.open(file.url)}
                  onChange={(info) => {
                    let {fileList} = info;
                    // fileList = fileList.filter(file => file.type === 'application/pdf');
                    fileList = fileList.map(file => {

                      if (file.response) {
                        file.url = file.response.result.url; // 假设服务端返回了文件url
                      }
                      return file;
                    });
                    const temp = this.state;
                    temp.fileList = fileList;
                    this.setState({...temp});

                  }}
                  // 限制文件类型为PDF
                  beforeUpload={file => {

                    // const isPdf = file.type === 'application/pdf';
                    // if (!isPdf) {
                    //   message.error('只可以上传 PDF 文件!');
                    // }
                    // return isPdf;
                  }}
                >
                  {fileList.length === 0 && <div>
                    <Icon type="plus"/>
                    <div className="ant-upload-text">上传文件</div>
                  </div>}
                </Upload>
              </FormField>
              <FormField
                label={"文件名"}
                name={'filename'}
                initialValue={filename}
              >
                <Input disabled
                ></Input>
              </FormField>
              <FormField
                label={"备注"}
                name={'memo'}
                initialValue={memo}
              >
                <TextArea
                ></TextArea>
              </FormField>
            </FormLayout>

        }
        {this.renderFoot()}
      </Form>
    );
  }
}



